<template>
  <div class="app-main-content">
    <el-row :gutter="15">
      <!--字典管理-->
      <el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="17">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">字典列表</span>
            <div style="float: right">
              <el-button type="primary" icon="el-icon-plus" size="mini" style="padding: 6px 9px" @click="addOrUpdateHandle()">新增</el-button>
            </div>
          </div>
          <searchbar ref="searchbar" :search-items="searchItems" :pagination="pagination" class="grid-search-bar" @search="getDataList" @resizeSearchbar="resizeSearchbar">
            <!-- <template slot="button">
              <el-button :size="size" type="primary" @click="addOrUpdateHandle()">新增</el-button>
            </template> -->
          </searchbar>
          <!--表格渲染-->
          <el-table v-loading="dataListLoading" :data="dataList" :height="tableHeight-80" border style="width: 100%;" @current-change="handleSelectedChange">
            <el-table-column prop="dictName" label="字典名称" />
            <el-table-column prop="dictCode" label="字典编号" />
            <el-table-column prop="description" label="描述" />
            <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
              <template slot-scope="scope">
                <el-button :size="size" type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                <el-button :size="size" type="text" @click="deleteHandle(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div ref="paginationbar" class="pagination-wrapper">
            <el-pagination :page-sizes="[20, 30, 50, 100, 200]" :page-size="pagination.limit" :current-page.sync="pagination.page" :total="pagination.total" style="float:right;" layout="sizes, prev, pager, next, total" @current-change="handleCurrentChange" @size-change="handleSizeChange"/>
          </div>
        </el-card>
      </el-col>
      <!-- 授权 -->
      <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="7">
        <el-alert :closable="false" :title="'选中字典：'+(currentItem?currentItem.dictName:'')" type="default" show-icon effect="light"/>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-tooltip class="item" effect="dark" content="选择指定字典查看详情" placement="top">
              <span class="role-span">字典配置</span>
            </el-tooltip>
            <el-button
              :disabled="currentId===null"
              icon="el-icon-plus"
              size="mini"
              style="float: right; padding: 6px 9px"
              type="primary"
              @click="addOrUpdateDictItemHandle">新增</el-button>
          </div>
          <dict-item ref="dictItem"/>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import Searchbar from '@/components/Searchbar'
import AddOrUpdate from './dict-add-or-update'
import * as API from '@/api/sys/dict'
import dictItem from './dict-item'

export default {
  components: {
    AddOrUpdate,
    Searchbar,
    dictItem
  },
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getListAPI: API.list,
        delAPI: API.del
      },
      searchItems: {
        normal: [
          { name: '字典名称', field: 'dictName', type: 'text', dbfield: 'dict_name', dboper: 'cn' },
          { name: '字典编号', field: 'dictCode', type: 'text', dbfield: 'dict_code', dboper: 'cn' }
        ]
      },

      currentItem: null,
      currentId: null

      // dictItemLoading: false,
      // // 字典配置列表属性
      // dictItemSearchItems: {
      //   normal: [
      //     { name: '名称', field: 'dictName', type: 'text', dbfield: 'dict_name', dboper: 'cn' },
      //     { name: '状态', field: 'dictCode', type: 'text', dbfield: 'dict_code', dboper: 'cn' }
      //   ]
      // },
      // dictItemDataList: [], // 数据列表
      // dictItemPagination: {
      //   page: 1,
      //   limit: 15,
      //   total: 0
      // },
      // dictItemDataListLoading: false, // 数据列表，loading状态
      // addOrUpdateDictItemVisible: false // 新增／更新，弹窗visible状态
    }
  },
  methods: {
    addOrUpdateDictItemHandle() {
      this.$refs.dictItem.addOrUpdateFunc(null, this.currentItem.id)
    },

    handleSelectedChange(val) {
      if (val) {
        // 保存当前的角色id
        this.currentId = val.dictName
        this.currentItem = val

        this.$refs.dictItem.dictName = val.dictName
        this.$refs.dictItem.dictId = val.id
        this.$refs.dictItem.init()
      }
    }
    // getDictDetaiDataList(data) {
    //   const _this = this
    //   let filters
    //   if (data) {
    //     if (data.resetCurrentPage) {
    //       this.dictItemPagination.page = 1
    //     }
    //     if (data.searchData) {
    //       filters = data.searchData
    //     }
    //   } else {
    //     filters = this.$refs.dictItemSearchbar.get()
    //   }

    //   this.dictItemDataListLoading = true

    //   const pagination = Object.assign({}, this.dictItemPagination)
    //   delete pagination.total

    //   const params = Object.assign({ filters: filters }, pagination)
    //   API.listOfDictItem(params).then(response => {
    //     if (response && response.code === 0) {
    //       _this.dictItemPagination.total = response.data.totalCount
    //       _this.dictItemDataList = response.data.list
    //     } else {
    //       _this.dictItemDataList = []
    //       _this.dictItemPagination.total = 0
    //     }
    //     _this.dictItemDataListLoading = false
    //   }).catch(() => {
    //     _this.dictItemDataListLoading = false
    //   })
    // },
    // // 分页跳转
    // handleDictItemCurrentChange: function(val) {
    //   this.dictItemPagination.page = val
    //   this.$refs.dictItemSearchbar.searchHandle(true)
    // },

    // // 分页条数修改
    // handleDictItemSizeChange: function(val) {
    //   this.dictItemPagination.limit = val
    //   this.$refs.dictItemSearchbar.searchHandle(true)
    // },
    // addOrUpdateDictItemHandle(id) {
    //   this.addOrUpdateDictItemVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.addOrUpdateDictItem.dataForm.id = id
    //     this.$refs.addOrUpdateDictItem.init(id)
    //   })
    // },

    // deleteDictItemHandle(id) {
    //   if (!id) {
    //     this.$message.error('对不起，id不存在不能进行删除')
    //     return
    //   }
    //   var ids = [id]
    //   this.$confirm(`确定进行删除操作?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     API.delOfDictItem(ids).then(data => {
    //       if (data && data.code === 0) {
    //         this.$message({
    //           message: '操作成功',
    //           type: 'success',
    //           duration: 1500,
    //           onClose: () => {
    //             this.getDataList()
    //           }
    //         })
    //       } else {
    //         this.$message.error(data.msg)
    //       }
    //     })
    //   })
    // }
  }
}
</script>
